<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Count List</title>
    <link rel="stylesheet" href="styles.css"> <!-- 如果有样式文件的话 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div class="container">
    <table>
        <thead>
        <tr>
            <th>ID</th>
            <th>目录</th>
            <th>文件数量</th>
            <th>文件类型</th>
            <th>创建时间</th>
            <th>创建用户</th>
            <th>更新用户</th>
            <th>更新时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <!-- 数据会在这里动态填充 -->
        </tbody>
    </table>
</div>

<script>
    $(document).ready(function() {
        // 发起请求
        $.ajax({
            url: '/FileCountNumber/selectFileCountNumber',  // 后端接口路径
            method: 'GET',
            dataType: 'json',
            success: function(data) {
                // 假设返回的数据格式为 { page: { list: [...] } }
                let rows = '';
                data.page.records.forEach(function(item) {
                    rows += `<tr>
                                    <td>${item.id}</td>
                                    <td>${item.directory}</td>
                                    <td>${item.countNum}</td>
                                    <td>${item.fileType}</td>
                                    <td>${item.createTime}</td>
                                    <td>${item.createUser}</td>
                                    <td>${item.updateUser}</td>
                                    <td>${item.updateTime}</td>
                                    <td><a href="#">删除</a> <a href="#">编辑</a></td>
                                </tr>`;
                });
                $('table tbody').html(rows);  // 更新表格内容
            },
            error: function(xhr, status, error) {
                alert("数据加载失败，请稍后再试！");
            }
        });
    });
</script>

</body>
</html>
